<template>
  <div>
    <div class="list">
      <h2>{{myActivity.title}}</h2>
      <ul>
        <li>
          <span class="s1">活动时间:</span>
          <div class="s2">{{myActivity.startTime}}--{{myActivity.endTime}}</div>
        </li>
        <li>
          <span class="s1">活动地点:</span>
          <div class="s2">{{myActivity.local}}</div>
        </li>
        <li>
          <span class="s1">需求说明:</span>
          <div class="s2">{{myActivity.need}}</div>
        </li>
        <li>
          <span class="s1">联系方式:</span>
          <div class="s2">{{myActivity.phone}}</div>
        </li>
        <li>
          <span class="s1">发布人:</span>
          <div class="s2">{{ myActivity.name }}</div>
        </li>
        <li>
          <span class="s1">服务组织:</span>
          <div class="s2">{{myActivity.detail}}</div>
        </li>
      </ul>
      <button @click="cancel" :disabled="disabled">取消报名</button>
      <ul>
        <li v-for="(message, index) in messages" :key="index">
          <span>{{message.content}}</span>
          <span>{{message.wxname}}</span>
          <span>{{message.createTime}}</span>
        </li>
      </ul>
      <form @submit="formSubmit">
        <textarea name="content" placeholder="发表你的意见"></textarea>
        <button @click="comment" form-type='submit'>发表评论</button>
      </form>
      

    </div>
  </div>
</template>


<script>
  import request from '../../utils/request'
  export default{
    data(){
      return {
        myActivity:'',
        data:'',
        disabled:false,
        user:'',
        messages:''
      }
    },
    methods: {
      async cancel(){
        let id = this.data.id
        let result = await request('/activity/myCancel',{id},'GET')
        if(result.status==1){
          let data ={
          id: id,
          sno: this.data.sno
          }
          let result1 = await request('/apply/myCancel',{data},'GET')
          console.log(result1.n)
          if(result1.n==1){
            wx.showToast({
                title: '取消报名成功',
                duration: 5000
              })
            this.disabled = true
          }
        }
        
        
      },
      async formSubmit(e){
        console.log(this.data)
        let data ={
          content:e.mp.detail.value.content,
          sno:this.user.sno,
          wxname:this.user.wxname,
          activityId:this.data.id
        }
        let result = await request('/message/create',{data},'GET')
        console.log(result)
      }
    },
    async mounted() {
      let data = JSON.parse(this.$mp.query.myActivity)
      this.data = data
      let id = data.id
      console.log(id,data)
      let result = await request('/activity/mylist',{id},'GET')
      this.myActivity = JSON.parse(JSON.stringify(result.data[0]))
      //console.log(this.data)
      this.disabled = false
      this.user = wx.getStorageSync('user');
      this.messages = await request('/message/list',{id},'GET')
    },
  }
</script>

<style scoped>
.list{
  width:100%;
  height:100%;
}
.list h2{
  color:red;
  text-align: center;
}
.list ul li{
  margin:40px 0;
  border-bottom: 1px solid rgb(202, 194, 194);
  padding-bottom: 20px;
  overflow:hidden;
}
.list ul li .s1{
  margin-left: 20px;
  color: red;
}
.list ul li .s2{

  width:220px;
  float: right;
  margin-right:20px;
  font-size:17px;
  color:rgb(146, 128, 128)
}
textarea{
  border:1px solid rgb(129, 109, 109);
  margin:20px;
}
button{
  background-color:red;
}
</style>
 